import ScrollBarLayout from '@/components/ScrollBarLayout';
import { Card, Tooltip } from 'antd';
import React from 'react';
import { useEffect, useState } from 'react';
import { connect } from 'umi';
import { DesignModelAPI } from '../common/type';
import canvasStyles from '../common/processStyles.less';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { getBaseUrl } from '@/services/urlconst';
const ActivitiProcessCanvas: React.FC<DesignModelAPI.IActivitiProcessCanvas> = ({
  curRes,
  locationProps,
}) => {
  const processCanvasRef: any = React.useRef();

  const [fullScreen, setFullScreen] = useState(false);

  const [canvasIDDom, setCavasIdDom] = useState<string>(
    `canvasActiviti-${Math.random() * 100000}`,
  );

  useEffect(() => {}, []);

  /**
   * 全屏
   */
  const onOpenScreen = () => {
    const element: any = document.getElementById(canvasIDDom);
    if (element?.requestFullscreen) {
      element.requestFullscreen();
    } else if (element?.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element?.webkitRequestFullScreen) {
      element.style.cssText =
        'object-fit: contain;position: fixed !important;top: 0px !important;right: 0px !important;bottom: 0px !important;left: 0px !important;box-sizing: border-box !important;min-width: 0px !important;max-width: none !important;min-height: 0px !important;max-height: none !important;width: 100% !important;height: 100% !important;transform: none !important;margin: 0px !important;';
      element.webkitRequestFullScreen();
    }
    setFullScreen(true);
  };

  /**
   * 退出全屏
   */
  const onCloseScreen = () => {
    const fullscreenElement =
      document.fullscreenElement ||
      (document as any)?.mozFullScreenElement ||
      (document as any)?.webkitFullscreenElement;
    if (document?.exitFullscreen) {
      if (fullscreenElement) {
        document.exitFullscreen();
      }
    } else if ((document as any)?.mozCancelFullScreen) {
      (document as any).mozCancelFullScreen();
    } else if ((document as any)?.webkitCancelFullScreen) {
      let element: any = document.getElementById(canvasIDDom);
      element.style.cssText = '';
      (document as any).webkitCancelFullScreen();
    } else if ((document as any)?.msExitFullscreen) {
      (document as any).msExitFullscreen();
    }
    setFullScreen(false);
  };

  return (
    <>
      <span ref={processCanvasRef} id={canvasIDDom}>
        <Card
          bordered={false}
          className={canvasStyles['canvasCardStyle']}
          title="流程设计"
          extra={
            <div
              style={{
                padding: '0px 10px 0px 0px',
              }}
            >
              <Tooltip
                title={fullScreen ? '退出全屏' : '全屏'}
                getPopupContainer={() =>
                  document.getElementById(canvasIDDom) as any
                }
                placement="bottom"
                arrowPointAtCenter={true}
              >
                <a
                  onClick={() => {
                    if (fullScreen) {
                      onCloseScreen();
                    } else {
                      onOpenScreen();
                    }
                  }}
                >
                  {fullScreen ? (
                    <FullscreenExitOutlined />
                  ) : (
                    <FullscreenOutlined />
                  )}
                </a>
              </Tooltip>
            </div>
          }
        >
          <ScrollBarLayout
            style={{
              padding: '10px',
              textAlign: 'center',
            }}
          >
            <iframe
              src={
                getBaseUrl() +
                '/modeler.html?modelId=' +
                locationProps?.state?.modelId
              }
              height={'99%'}
              width="100%"
            />
          </ScrollBarLayout>
        </Card>
      </span>
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(ActivitiProcessCanvas);
